<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Day01</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
    <!-- 容器与实例之间一对一 -->
    <!-- 在{{ }}中间书写Js表达式，生成一个值，
        eg. a  a+b  demo(1)  x==y?a:b
        js代码是语句 
        eg. if(){}   for(){}
    -->
    <div id="root">
        <h1>Hello,{{name}} 我正在 {{school}}</h1>
    </div>

    <div id="root">
        <h1>Hello,{{school}}</h1>
    </div>
    <!-- <script type="text/javascript">
        Vue.config.productionTip = false;
    </script> -->

    <script>
        //创建实例 参数只能有一个配置对象
        const vm = new Vue({
            el: "#root", //指定服务的对象，指定CSS选择器
            data: {
                name: "SWPU",
                school: "Coming",//无法生效
            },
        });
        /**
         * 会覆盖上段的Vue实例数据会重新注入
         * const vm2 = new Vue({
         * el: "#root", //指定服务的对象，指定CSS选择器
         * data: {
         * school: "Coming", 
         *   },
         }); **/

    </script>
</body>

</html>